<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<style>
		#box {
			width: 200px;
			height: 200px;
			background-color: #ccc;
			/* position: absolute;
			top: 0;
			left: 0; */
			transform: translate(0px, 0px);
		} 	
	</style>

<body>
	<div id="box">

	</div>
</body>
<script>
	// 方向锁定

	// 检测拖动距离，和按下的时候相比，如果横向移动先超出一定距离，就判断为横向，如果纵向移动超过一定距离，就判断为垂直的

	// 步骤为两个部分
	// 阶段1，方向确定之前，这是横向和纵向都没有超过一定的距离，压根不懂
	// 阶段2，等到方向超过了一定距离，确定了方向，再移动元素

	let oBox = document.querySelector('#box');
	let disX, disY;
	let x = 0,
		y = 0;

	let dir = '';  // dir 是决定方向的变量，一开始还没有确定方向所以为空

	let startX, startY;

	function fnMove(ev) {
		if (dir == '') {
			// 等待方向超出一定距离
			// 如果横向移动超过5px
			if (Math.abs(ev.targetTouches[0].clientX - startX) >= 5) {
				dir = 'x';
				// 如果纵向移动超过5px
			} else if (Math.abs(ev.targetTouches[0].clientY - startY) >= 5) {
				dir = 'y';
			}
		} else {

			// 已经超出，正常移动
			if (dir == 'x') {
				x = ev.targetTouches[0].clientX - disX;
			} else if (dir == 'y') {
				y = ev.targetTouches[0].clientY - disY;
			}
			oBox.style.transform = `translate(${x}px, ${y}px)`;
		}
	}

	function fnEnd(ev) {
		oBox.removeEventListener('touchmove', fnMove, false);
		oBox.removeEventListener('touchend', fnEnd, false);
	}

	oBox.addEventListener('touchstart', function (ev) {
		dir = '';   // 每次点击时候重新判断
		// 移动后的位置
		disX = ev.targetTouches[0].clientX - x;
		disY = ev.targetTouches[0].clientY - y;

		// 点击的位置
		startX = ev.targetTouches[0].clientX;
		startY = ev.targetTouches[0].clientY;

		oBox.addEventListener('touchmove', fnMove, false)

		oBox.addEventListener('touchend', fnEnd, false)
	}, false)
</script>

</html>